import { Component, OnInit } from '@angular/core';
import {PageSubject} from '../../../../util/page-subject';
import {Path} from '../../../../portal/admin/admin-breadcrumb/breadcrumb';
import {SortablejsOptions} from 'angular-sortablejs';

declare var $;
declare var echarts;

@Component({
  selector: 'app-tpl-config',
  templateUrl: './tpl-config.component.html',
  styleUrls: ['./tpl-config.component.css']
})
export class TplConfigComponent implements OnInit {
  list: Array<any> = [
    {content: 'text', name: '文字', text: '测试'},
    {
      content: 'chart',
      name: '南丁格尔玫瑰图',
      option: {
        baseOption: {
          title : {
            text: '南丁格尔玫瑰图',
            subtext: '纯属虚构',
            x: 'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {
                show: true,
                type: ['pie', 'funnel']
              },
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          series : [
            {
              name: '半径模式',
              type: 'pie',
              roseType : 'radius',
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              lableLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'},
                {value: 20, name: 'rose5'},
                {value: 35, name: 'rose6'},
                {value: 30, name: 'rose7'},
                {value: 40, name: 'rose8'}
              ]
            },
            {
              name: '面积模式',
              type: 'pie',
              roseType :  'area',
              data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'},
                {value: 20, name: 'rose5'},
                {value: 35, name: 'rose6'},
                {value: 30, name: 'rose7'},
                {value: 40, name: 'rose8'}
              ]
            }
          ]
        },
        media: [
          {
            option: {
              legend: {
                right: 'center',
                bottom: 0,
                orient: 'horizontal'
              },
              series: [
                {
                  radius: [20, '50%'],
                  center: ['25%', '50%']
                },
                {
                  radius: [30, '50%'],
                  center: ['75%', '50%']
                }
              ]
            }
          },
          {
            query: {
              minAspectRatio: 1
            },
            option: {
              legend: {
                right: 'center',
                bottom: 0,
                orient: 'horizontal'
              },
              series: [
                {
                  radius: [20, '50%'],
                  center: ['25%', '50%']
                },
                {
                  radius: [30, '50%'],
                  center: ['75%', '50%']
                }
              ]
            }
          },
          {
            query: {
              maxAspectRatio: 1
            },
            option: {
              legend: {
                right: 'center',
                bottom: 0,
                orient: 'horizontal'
              },
              series: [
                {
                  radius: [20, '50%'],
                  center: ['50%', '30%']
                },
                {
                  radius: [30, '50%'],
                  center: ['50%', '70%']
                }
              ]
            }
          },
          {
            query: {
              maxWidth: 500
            },
            option: {
              legend: {
                right: 10,
                top: '15%',
                orient: 'vertical'
              },
              series: [
                {
                  radius: [20, '50%'],
                  center: ['50%', '30%']
                },
                {
                  radius: [30, '50%'],
                  center: ['50%', '75%']
                }
              ]
            }
          }
        ]
      }
    },
    {content: 'img', name: '图片', src: 'https://www.baidu.com/img/bd_logo1.png'},
    {
      content: 'chart',
      name: '散点图',
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        title: {
          text: '散点图',
          subtext: '纯属虚构',
          x: 'center'
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          splitNumber: 20
        },
        yAxis: {
          type: 'value',
          min: -40,
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 90
        },
        series: [{
          name: 'scatter',
          type: 'scatter',
          label: {
            emphasis: {
              show: true,
              position: 'right',
              textStyle: {
                color: 'blue',
                fontSize: 16
              }
            }
          },
          data: [
            [96.24, 11.35],
            [33.09, 85.11],
            [57.60, 36.61],
            [36.77, 27.26],
            [20.10, 6.72],
            [45.53, 36.37],
            [110.07, 80.13],
            [72.05, 20.88],
            [39.82, 37.15],
            [48.05, 70.50],
            [0.85, 2.57],
            [51.66, 63.70],
            [61.07, 127.13],
            [64.54, 33.59],
            [35.50, 25.01],
            [226.55, 664.02],
            [188.60, 175.31],
            [81.31, 108.68]
          ]
        }]
      }
    },
    {
      content: 'chart',
      name: '折线图',
      option: {
        title: {
          text: '未来一周气温变化',
          subtext: '纯属虚构'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['最高气温', '最低气温']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis:  {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: '最高气温',
            type: 'line',
            data: [11, 11, 15, 13, 12, 13, 10],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '最低气温',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [
                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'},
                [{
                  symbol: 'none',
                  x: '90%',
                  yAxis: 'max'
                }, {
                  symbol: 'circle',
                  label: {
                    normal: {
                      position: 'start',
                      formatter: '最大值'
                    }
                  },
                  type: 'max',
                  name: '最高点'
                }]
              ]
            }
          }
        ]
      }
    },
    {
      content: 'chart',
      name: '柱状图',
      option: {
        title: {
          text: '降水量',
          subtext: '纯属虚构'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          data: ['蒸发量', '降水量']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 250,
            position: 'left',
            axisLabel: {
              formatter: '{value} ml'
            }
          }
        ],
        series: [
          {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          }
        ]
      }
    }
  ];
  list2: Array<any> = [];
  clone1Options: SortablejsOptions = {
    group: {
      name: 'clone-group',
      pull: 'clone',
      put: false,
    },
    sort: false,
    onEnd: (e) => {
      console.log('end');
      const index = e.newIndex;
      const data = this.list2[index];
      console.log(this.list2[index]);
      if (data.content === 'chart') {
        console.log($('#chart' + index)[0]);
        const chart = echarts.init(document.getElementById('chart' + index));
        chart.setOption(data.option);
        chart.on('mouseover', function (params) {
          console.log(params);
        });
        /**
         * 用于解决添加相同的数据并且添加在原有数据之前时，图表只显示一个的问题。
         */
        this.list2.forEach((val , i) => {
          if (i > index && JSON.stringify(val) === JSON.stringify(data)) {
            console.log($('#chart' + i)[0]);
            const nextChart = echarts.init(document.getElementById('chart' + i));
            nextChart.setOption(data.option);
            nextChart.on('mouseover', function (params) {
              if (params) {
                console.log(params);
              } else {
                console.log('aa');
              }
            });
          }
        })
      }
    }
  };
  clone1Options2: SortablejsOptions = {
    group: 'clone-group',
  };
  constructor(
    private pageSubject: PageSubject
  ) { }
  ngOnInit() {
    this.pushPage();
  }
  /**
   * 面包屑导航
   */
  pushPage() {
    const path = new Path('模板', '');
    this.pageSubject.pushPage('模板配置', '', path);
  }
  removeElem(i) {
    console.log(this.list2);
    this.list2.splice(i, 1);
    console.log(this.list2);
  }
}
